<template>
	<!-- 各种班级选项卡模块 -->
	<view class="class-type">
		<view class="item" @click="linkClassTypeDetail(item)" v-for="(item,index) in class_type_urls" :key='index'>
			<view :class="['bg-color', item.color]">
				<text :class="['iconfont', item.icon]"></text>
			</view>
			<text class="title">{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				class_type_urls: [// 跳转地址
					{
						url: 'xuanke', 
						icon: 'icon-kefu-mian',
						color: 'orange',
						title: '选课咨询'
					},
					{
						url: 'free-lesson',
						icon: 'icon-mianfeiban',
						color: 'purple',
						kind: 1,
						title: '免费班'
					},
					{
						url: 'season-index',
						icon: 'icon-changguiban',
						color: 'green',
						kind: 2,
						title: '常规班'
					},
					{
						url: 'free-lesson', 
						icon: 'icon-jiqiaoban',
						color: 'pink',
						kind: 3,
						title: '技巧班'
					},
					
					{
						url: 'free-lesson',
						icon: 'icon-kaoqianchongci',
						color: 'blue',
						kind: 4,
						title: '考前冲刺'
					}
				], 
			}
		},
		methods:{
			// 通知父组件进行跳转
			linkClassTypeDetail(url){
				this.$emit('linkClassTypeDetail', url)
			}
		}
	}
</script>

<style scoped>
	@import url("../../../static/font_lesson/iconfont.css");
	.iconfont {font-family: iconlessonfont;}
	.class-type{display:flex; justify-content: space-between;}
	.class-type .title{font-size: 30upx;font-family:Source Han Sans CN;font-weight:400;color: #333;}
	.item{display:flex; width:120upx; flex-direction:column; align-items:center;}
	
	.bg-color{width:80upx; height:80upx; border-radius:20upx;text-align:center;}
	.bg-color text{font-size:50upx;color:#fff;}
	
	.orange{background:linear-gradient(180deg,rgba(254,185,104,1) 0%,rgba(254,118,91,1) 100%);}
	.purple{background:linear-gradient(180deg,rgba(254,166,254,1) 0%,rgba(181,100,242,1) 100%);}
	.pink{background:linear-gradient(180deg,rgba(255,131,189,1) 0%,rgba(255,109,132,1) 100%);}
	.green{background:linear-gradient(180deg,rgba(104,229,131,1) 0%,rgba(32,204,157,1) 100%);}
	.blue{background:linear-gradient(180deg,rgba(80,195,255,1) 0%,rgba(114,134,254,1) 100%);}
</style>
